<div class="main-wrap">
	<!--标题 -->
	<div class="user-safety">
		<div class="am-cf am-padding">
			<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账户安全</strong> / <small>Set&nbsp;up&nbsp;Safety</small></div>
		</div>
		<hr/>

		<!--头像 -->
		<div class="user-infoPic">

			<div class="filePic">
				<img class="am-circle am-img-thumbnail" src="../images/getAvatar.do.jpg" id="avatar" alt="" />
			</div>

			<p class="am-form-help">头像</p>

			<div class="info-m">
				<div><b>用户名：<i id="person-name">匿名</i></b></div>
				<div class="safeText">
					<a href="safety.html">账户安全:<em style="margin-left:20px ;">60</em>分</a>
					<div class="progressBar"><span style="left: -95px;" class="progress"></span></div>
				</div>
			</div>
		</div>

		<div class="check">
			<ul>
				<li>
					<i class="i-safety-lock"></i>
					<div class="m-left">
						<div class="fore1">登录密码</div>
						<div class="fore2"><small>为保证您购物安全，建议您定期更改密码以保护账户安全。</small></div>
					</div>
					<div class="fore3">
						<div class="am-btn am-btn-secondary" id="btn-password">修改</div>
					</div>
				</li>
				<li>
					<i class="i-safety-iphone"></i>
					<div class="m-left">
						<div class="fore1">手机验证</div>
						<div class="fore2"><small>您验证的手机：186XXXXXXXX 若已丢失或停用，请立即更换</small></div>
					</div>
					<div class="fore3">
						<div class="am-btn am-btn-secondary" id="btn-phone">换绑</div>
					</div>
				</li>
				<li>
					<i class="i-safety-mail"></i>
					<div class="m-left">
						<div class="fore1">邮箱验证</div>
						<div class="fore2"><small>您验证的邮箱：5831XXX@qq.com 可用于快速找回登录密码</small></div>
					</div>
					<div class="fore3">
						<div class="am-btn am-btn-secondary" id="btn-email">换绑</div>
					</div>
				</li>
				<li>
					<i class="i-safety-idcard"></i>
					<div class="m-left">
						<div class="fore1">实名认证</div>
						<div class="fore2"><small>用于提升账号的安全性和信任级别，认证后不能修改认证信息。</small></div>
					</div>
					<div class="fore3">
						<div class="am-btn am-btn-secondary" id="btn-idcard">认证</div>
					</div>
				</li>
				<li>
					<i class="i-safety-security"></i>
					<div class="m-left">
						<div class="fore1">安全问题</div>
						<div class="fore2"><small>保护账户安全，验证您身份的工具之一。</small></div>
					</div>
					<div class="fore3">
						<div class="am-btn am-btn-secondary" id="btn-question">认证</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<!--修改密码模态框-->
<div class="am-popup" id="modify-password" style="height: 460px;">
	<div class="am-popup-inner">
		<div class="am-popup-hd">
			<h4 class="am-popup-title">修改密码</h4>
			<span data-am-modal-close class="am-close">&times;</span>
		</div>
		<div class="am-popup-bd">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">修改密码</strong> / <small>Password</small></div>
			</div>
			<hr/>
			<form class="am-form am-form-horizontal" id="pass-form">
				<div class="am-form-group">
					<label for="user-old-password" class="am-form-label">原密码</label>
					<div class="am-form-content">
						<input type="password" name="oldpass" id="user-old-password" placeholder="请输入原登录密码">
					</div>
				</div>
				<div class="am-form-group">
					<label for="user-new-password" class="am-form-label">新密码</label>
					<div class="am-form-content">
						<input type="password" name="newpass" id="user-new-password" placeholder="由数字、字母组合">
					</div>
				</div>
				<div class="am-form-group">
					<label for="user-confirm-password" class="am-form-label">确认密码</label>
					<div class="am-form-content">
						<input type="password" id="user-confirm-password" placeholder="请再次输入上面的密码">
					</div>
				</div>
<<<<<<< HEAD
				<div class="info-btn">
					<div class="am-btn am-btn-danger" id="save-password" >保存修改</div>
				</div>
			</form>
		</div>
	</div>
</div>
<!--手机换绑模态框-->
<div class="am-popup" id="modify-phone" style="height: 520px;">
	<div class="am-popup-inner">
		<div class="am-popup-hd">
			<h4 class="am-popup-title">绑定手机</h4>
			<span data-am-modal-close class="am-close">&times;</span>
		</div>
		<div class="am-popup-bd">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">绑定手机</strong> / <small>Bind&nbsp;Phone</small></div>
			</div>
			<hr/>
			<form class="am-form am-form-horizontal" id="phone-form">
				<input type="hidden" name="user_id" id="password_id">
				<div class="am-form-group bind">
					<label for="user-phone" class="am-form-label">验证手机</label>
					<div class="am-form-content">
						<span id="user-phone">186XXXX0531</span>
					</div>
				</div>
				<div class="am-form-group code">
					<label for="user-code" class="am-form-label">验证码</label>
					<div class="am-form-content">
						<input type="tel" id="user-code" placeholder="短信验证码">
					</div>
					<a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
						<div class="am-btn am-btn-danger">验证码</div>
					</a>
				</div>
				<div class="am-form-group">
					<label for="user-new-phone" class="am-form-label">验证手机</label>
					<div class="am-form-content">
						<input type="tel" id="user-new-phone" placeholder="绑定新手机号">
					</div>
				</div>
				<div class="am-form-group code">
					<label for="user-new-code" class="am-form-label">验证码</label>
					<div class="am-form-content">
						<input type="tel" id="user-new-code" placeholder="短信验证码">
					</div>
					<a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
						<div class="am-btn am-btn-danger">验证码</div>
					</a>
				</div>
				<div class="info-btn">
					<div class="am-btn am-btn-danger">保存修改</div>
				</div>
			</form>
		</div>
	</div>
</div>
<!--邮箱验证模态框-->
<div class="am-popup hide" id="modify-emial" style="height: 380px;">
	<div class="am-popup-inner">
		<div class="am-popup-hd">
			<h4 class="am-popup-title">绑定邮箱</h4>
			<span data-am-modal-close class="am-close">&times;</span>
		</div>
		<div class="am-popup-bd">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">绑定邮箱</strong> / <small>Email</small></div>
			</div>
			<hr/>
			<form class="am-form am-form-horizontal" id="mail-form">
				<input type="hidden" name="user_id" id="email_id">
				<div class="am-form-group">
					<label for="user-email" class="am-form-label">验证邮箱</label>
					<div class="am-form-content">
						<input name="email" type="email" id="user-email" placeholder="请输入邮箱地址">
					</div>
				</div>
				<div class="am-form-group code">
					<label for="user-code" class="am-form-label">验证码</label>
					<div class="am-form-content">
						<input type="tel" id="user-code" placeholder="验证码">
					</div>
					<a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
						<div class="am-btn am-btn-danger">验证码</div>
					</a>
				</div>
				<div class="info-btn">
					<div class="am-btn am-btn-danger" id="save-mail">保存修改</div>
				</div>
			</form>
		</div>
	</div>
</div>
<!--实名认证模态框-->
<div class="am-popup" id="modify-idcard" style="width: 700px;height: 700px;">
	<div class="am-popup-inner">
		<div class="am-popup-hd">
			<h4 class="am-popup-title">实名认证</h4>
			<span data-am-modal-close class="am-close">&times;</span>
		</div>
		<div class="am-popup-bd">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">实名认证</strong> / <small>Real&nbsp;authentication</small></div>
			</div>
			<hr/>
			<form class="authentication" id="idcard-form">
			    <input type="hidden" name="user_id" id="idcard_id">
				<p>请填写您身份证上的真实信息，以用于报关审核</p>
				<div class="authenticationInfo">
					<p class="title">填写个人信息</p>
					<div class="am-form-group">
						<label for="user-name" class="am-form-label">真实姓名</label>
						<div class="am-form-content">
							<input name="realname" type="text" id="user-name" placeholder="请输入您的真实姓名">
						</div>
					</div>
					<div class="am-form-group">
						<label for="user-IDcard" class="am-form-label">身份证号</label>
						<div class="am-form-content">
							<input name="id_card" type="tel" id="user-IDcard" placeholder="请输入您的身份证信息">
						</div>
					</div>
				</div>
				<div class="authenticationPic">
					<p class="title">上传身份证照片</p>
					<p class="tip">请按要求上传身份证</p>
					<ul class="cardlist">
						<li>
							<div class="cardPic">
								<label for="front">
								<img id="frontimg"  src="../images/cardbg.jpg" style="width: 210px;height: 131px; alt=""/>
								    <input type="hidden" id="front_img" name="front_img"/>
								    <div class="cardText" id="con1">
								    	<i class="am-icon-plus"></i>
									    <p>正面照片</p>
								    </div>
								<input id="front" type="file" multiple style="display: none;">
								</label>
								<p class="titleText">身份证正面</p>
							</div>
							<div class="cardExample">
								<img src="../images/idcardfront.jpg">
								<p class="titleText">示例</p>
							</div>
						</li>
						<li>
							<div class="cardPic">
								<label for="back">
								<img id="backimg"  src="../images/cardbg.jpg" style="width: 210px;height: 131px; alt=""/>
								    <input type="hidden" id="back_img" name="back_img"/>
								    <div class="cardText" id="con2">
								    	<i class="am-icon-plus"></i>
									    <p>背面照片</p>
								    </div>
								<input id="back" type="file" multiple style="display: none;">
								</label>
								<p class="titleText">身份证背面</p>
							</div>
							<div class="cardExample">
								<img src="../images/idcardback.jpg">
								<p class="titleText">示例</p>
							</div>

						</li>
					</ul>
				</div>
				<div class="info-btn" style="width: 60px;margin-left: 310px;">
					<div class="am-btn am-btn-danger" id="save-idcard">提交</div>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
<!--安全问题模态框-->
<div class="am-popup" id="modify-question" style="height: 530px;">
	<div class="am-popup-inner">
		<div class="am-popup-hd">
			<h4 class="am-popup-title">安全问题</h4>
			<span data-am-modal-close class="am-close">&times;</span>
		</div>
		<div class="am-popup-bd">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">设置安全问题</strong> / <small>Set&nbsp;Safety&nbsp;Question</small></div>
			</div>
			<hr/>
			<form class="am-form am-form-horizontal" id="question-form" action="/api/user/modifyquestion" method="post">
				<div>
					<input type="hidden" name="user_id" id="question1">
					<div class="am-form-group select">
					<label for="user-question1" class="am-form-label">问题一</label>
					<div class="am-form-content">
						<select data-am-selected name="question1">
									<option value="" selected>请选择安全问题</option>
									<option value="您最喜欢的颜色是什么？">您最喜欢的颜色是什么？</option>
									<option value="您的故乡在哪里？">您的故乡在哪里？</option>
						</select>
					</div>
				</div>
				<div class="am-form-group">
					<label for="user-answer1" class="am-form-label">答案</label>
					<div class="am-form-content">
						<input name="answer1" type="text" id="user-answer1" placeholder="请输入安全问题答案">
					</div>
				</div>
				</div>
				<div>
				<input type="hidden" name="user_id" id="question2">
				<div class="am-form-group select">
					<label for="user-question2" class="am-form-label">问题二</label>
					<div class="am-form-content">
						<select data-am-selected name="question2">
									<option value="" selected>请选择安全问题</option>
									<option value="您最喜欢的颜色是什么？">您最喜欢的颜色是什么？</option>
									<option value="您的故乡在哪里？">您的故乡在哪里？</option>
						</select>
					</div>
				</div>
				<div class="am-form-group">
					<label for="user-answer2" class="am-form-label">答案</label>
					<div class="am-form-content">
						<input name="answer2" type="text" id="user-answer2" placeholder="请输入安全问题答案">
					</div>
				</div>
				<div class="info-btn">
					<div class="am-btn am-btn-danger"  id="save-question">保存修改</div>
				</div>
=======
			    <div class="info-btn">
					<div class="am-btn am-btn-danger" id="save-modify">保存修改</div>
>>>>>>> refs/remotes/origin/wfp
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
	//获取用户信息
	var id=window.person.userId;
	$("#avatar").attr("src", person.avatar);
	$("#person-name").text(person.username);
//密码修改
	$("#btn-password").click(function() {
		$("#modify-password").modal();
	});
	$("#save-password").click(function() {
		$.post("/api/user/modifypassword", $("#pass-form").serialize(), function(data) {
			alert(data.msg);
			$("#modify-password").modal().close();
		});
	});
//手机验证
	$("#btn-phone").click(function() {
		$("#modify-phone").modal();
	});
	//获取手机号码且中间数字用*代替
	$("#user-phone").text(person.mobile)
	var phone = $("#user-phone").text();
	var myphone = phone.substr(3, 4);
	var lphone = phone.replace(myphone, "****");
	$("#user-phone").text(lphone);
//邮箱验证
	$("#email_id").val(id);
	$("#btn-email").click(function() {
		$("#modify-emial").modal();
	});
	$("#save-mail").click(function () {
		$.post("/api/user/modifyupdate",$("#mail-form").serialize(),function (data) {
			alert(data.msg);
			$("#modify-emial").modal().close();
		})
		
	})
//实名认证
	$("#idcard_id").val(id)
	$("#btn-idcard").click(function() {
			$("#modify-idcard").modal();
		})
	
	//上传图片
	$("#front").change(function() {
		console.log(this)
		var file = this.files[0];
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function() {
			$("#frontimg").attr("src", this.result);
			$("#front_img").val(this.result)
		}
		$("#con1").hide();
	});
	$("#back").change(function() {
		console.log(this)
		var file = this.files[0];
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function() {
			$("#backimg").attr("src", this.result);
			$("#back_img").val(this.result)
		}
		$("#con2").hide();
	});
	$("#save-idcard").click(function () {
		$.post("/api/user/modifyupdate",$("#idcard-form").serialize(),function (data) {
			alert(data.msg);
			$("#modify-idcard").modal().close();
		})
	})
//安全问题
    $("#question1").val(id);
    $("#question2").val(id);
	$("#btn-question").click(function() {
		$("#modify-question").modal();
	})
	$("#save-question").click(function () {
		$.post("/api/user/modifyquestion",$("#question-form").serialize(),function (data) {
			alert(data.msg)
			
		})
		$("#modify-question").modal().close();
	})
     
</script>